  <template>
  <div id="chooseCompany">
    <el-dialog :visible.sync="dialogTable" width="900px">
      <div class="swdyTops">
        <span class="search">搜索公司：</span>
        <el-input class="elinput" size="small" placeholder="请输入公司关键字" v-model="search"></el-input>
        <span class="sousuo">搜索不到？</span>
        <el-button class="gocreat" size="small" type="primary" @click="goChuangjian">去创建</el-button>
      </div>
      <div class="diatable">
        <el-table :data="diatableData" border style="width: 100%">
          <el-table-column prop="clientId" label="序号" align="center"></el-table-column>
          <el-table-column prop="companyName" label="客户名称" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "chooseCompany",
  data() {
    return {
      dialogTable: false,
      diatableData: [],
      currentPage: "",
      total: 0,
      search: '',
    };
  },
  mounted() {
    this.$bus.$on("chooseCompany", config => {
      if (!config) return (this.dialogTable = false);
      this.callback = config.callback;
      this.dialogTable = true;
    });
  },
  methods: {
    // 弹窗的选择
    choose(data) {
      this.search = '';
      this.callback(data.companyName, data.clientId);
      this.dialogTable = false;
    },
    goChuangjian() {
      this.$router.push("home/enterInfo");
      this.dialogTable = false;
    },
    // 弹窗供应商公司列表
    getList(val) {
      this.currentPage = val;
      let obj = {
        companyName: this.search,
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/project/showClientListForProject", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.diatableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val);
    }
  },
  watch: {
    search: function() {
      this.getList(1);
    },
    dialogTable: function(xin) {
      if (xin) {
        this.getList(1);
      }
    }
  }
};
</script>

<style lang="scss">
#chooseCompany {
  .swdyTops {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #b9b9b9;
    padding-bottom: 26px;
    .el-input {
      width: 160px;
    }
    .sousuo {
      margin: 0 40px;
    }
  }
  .diatable {
    margin-top: 10px;
    background: white;
    padding-top: 16px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
